#@head()
<hr>
<button type="button" class="layui-btn" id="addUserButton">添加用户</button>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="operationButton">
	<button type="button" class="layui-btn layui-btn-normal" lay-event='edit'>编辑</button>
	<button type="button" class="layui-btn layui-btn-danger" lay-event='del'>删除</button>
</script>
<div id="addUserContainer" hidden>
	<form class="layui-form" id="addUserForm">
	  <div class="layui-form-item">
		<label class="layui-form-label">输入框</label>
		<div class="layui-input-block">
		  <input type="text" name="user.username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
		</div>
	  </div>
	  <div class="layui-form-item">
		<label class="layui-form-label">密码框</label>
		<div class="layui-input-inline">
		  <input type="password" name="user.password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
		</div>
		<div class="layui-form-mid layui-word-aux">辅助文字</div>
	  </div>
	 </form>
</div>
#@foot()
<script>
layui.use('table', function(){
  var table = layui.table;

  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 'auto'
    ,url: '/user/list' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:200, sort: true}
      ,{field: 'password', title: '密码', width:200, sort: true}
      ,{field: '操作' ,templet:'#operationButton'}
    ]]
  });

	$("#addUserButton").click(function(){
		layer.open({
		  type: 1,
		  area: ['500px', '300px'],
		  content: $('#addUserContainer')
		  ,btn: ['添加', '取消']
		  ,yes: function(index, layero){
				$.ajax({
					url:"/user/addUser",
					data:$("#addUserForm").serialize(),
					type:"post",
					success:function(res){
						if(res.msg === "success"){
							table.reload('demo', {
							  url: '/user/list'
							  ,where: {} //设定异步数据接口的额外参数
							});
							$("#addUserContainer").hide()
							layer.closeAll();
						}
					}
				})
			}
		  ,btn2: function(index, layero){
				$("#addUserContainer").hide()
			}
		});
	})
	
	//监听工具条 
	table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
	 
	  if(layEvent === 'edit'){ //编辑
	    //do somehing
	  } else if(layEvent === 'del'){ //删除
	    layer.confirm('真的删除行么', function(index){
	      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	      layer.close(index);
	      //向服务端发送删除指令
		  $.ajax({
			  url:'/user/delUser',
			  data:data,
			  type:'post',
			  success:function(res){
				  if(res.msg === "success"){
				  	console.log("success")
				  }
			  }
		  })
	    });
	  }
	});
});
</script>